<template>
	<div id="BalanceDeposit">
		<x-header :left-options="{showBack: false}" title="余额提现" class="header vux-1px-b">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="groom">
			<check-icon :value.sync="agree" class="check"></check-icon>
			<img src="../assets/images/home/icon_wechat.png" alt="" />
			<div class="wechat">
				<div class="rec">
					<h2>微信零钱</h2>
					<span>推荐</span>
				</div>
				<p>单笔最高额度50,000</p>
			</div>
		</div>
		<router-link to="MyCardList">
			<div class="add-card">
				<span>添加银行卡</span>
				<img src="../assets/images/home/icon_right2.png" alt="" />
			</div>
		</router-link>
		<div class="amount">
			<p class="title">提现金额</p>
			<b>￥</b>
			<x-input type="number" v-model="cash_money" @on-change="change"></x-input>
			<p class="allmoney">
				<span>可提现余额{{predeposit}}</span>
				<span @click="presentate">全部提现</span>
			</p>
		</div>
		<button @click="submitPrice">申请提现</button>
		<toast v-model="success" type="text" width='6.2rem' is-show-mask>{{msg}}</toast>
	</div>
</template>

<script>
	import $ from 'jquery'
	import { XHeader, CheckIcon, XInput, Toast } from 'vux'
	export default {
		data() {
			return {
				agree: true,
				predeposit: '',
				freeze_predeposit: '',
				cash_money: '',
				success: false,
				msg: ''
			}
		},
		components: {
			XHeader,
			CheckIcon,
			XInput,
			Toast
		},
		created() {
			this.getTotalPrice();
		},
		methods: {
			getTotalPrice: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/seller/cash.json',
					data: ''
				}).then((result) => {
					if(result.data.code == 1) {
						this.predeposit = result.data.data.available_predeposit;
						this.freeze_predeposit = (result.data.data.freeze_predeposit - result.data.data.freeze_predeposit * 0.02).toFixed(2);
					}
				}).catch((err) => {

				})
			},
			submitPrice: function() {
				var params = {
					cash_money: this.cash_money,
				}
				if(this.cash_money == '') {
					this.success = !this.success;
					this.msg = '请输入提现金额';
				} else if(this.freeze_predeposit < 100) {
					this.success = !this.success;
					this.msg = '余额大于100可提现';
				} else {
					this.$http({
						method: 'POST',
						url: '/los/api/seller/cash_outflow.json',
						data: params
					}).then((result) => {
						this.success = !this.success;
						this.msg = result.data.msg;
					}).catch((err) => {

					})
				}

			},

			change: function(e) {
				if(e != '') {
					$('button').css('background', '#a30000')
				} else {
					$('button').css('background', '#e6e6e6')
				}
			},
			presentate: function() {
				this.cash_money = this.predeposit;
			},
			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	.header {
		background: #fff;
	}
	
	.groom {
		overflow: hidden;
		height: 1.86rem;
		background: #fff;
		padding: 0.4rem 0.26rem;
	}
	
	.groom .check {
		float: left;
		margin-top: 0.26rem;
	}
	
	.groom img {
		float: left;
		width: 1.06rem;
		height: 1.06rem;
		border-radius: 0.1rem;
	}
	
	.groom .wechat {
		width: 60%;
		float: left;
		margin-left: 0.21rem;
		overflow: hidden;
	}
	
	.groom .wechat .rec {
		overflow: hidden;
	}
	
	.groom .wechat .rec h2 {
		font-size: 0.4rem;
		color: #333;
		float: left;
	}
	
	.groom .wechat .rec span {
		float: left;
		color: #ff8f3d;
		font-size: 0.26rem;
		background: #fff2e9;
		margin-top: 0.1rem;
		padding: 0 0.13rem;
		border-radius: 0.05rem;
		margin-left: 0.26rem;
	}
	
	.groom .wechat p {
		float: left;
		margin-top: 0.15rem;
		color: #aaa;
		font-size: 0.32rem;
	}
	
	.add-card {
		margin-top: 0.26rem;
		height: 1.86rem;
		line-height: 1.86rem;
		background: #fff;
		overflow: hidden;
		padding: 0 0.26rem;
	}
	
	.add-card span {
		float: left;
		color: #333;
		font-size: 0.4rem;
	}
	
	.add-card img {
		float: right;
		width: 0.32rem;
		height: 0.32rem;
		margin-top: 0.77rem;
	}
	
	.amount {
		background: #fff;
		height: 3.81rem;
		margin-top: 0.26rem;
		padding: 0.45rem 0.26rem;
	}
	
	.amount .title {
		font-size: 0.4rem;
		color: #777;
		margin-bottom: 0.4rem;
	}
	
	.amount b {
		font-size: 0.84rem;
		color: #000;
		font-weight: normal;
	}
	
	.amount input {
		float: right;
		text-align: left;
		height: 0.84rem;
		line-height: 0.84rem;
		margin-top: 0.26rem;
		width: 90%;
		font-size: 0.84rem;
	}
	
	.amount .allmoney {
		margin-top: 0.5rem;
		font-size: 0.37rem;
		color: #777;
		overflow: hidden;
	}
	
	.amount .allmoney span:last-child {
		float: right;
		color: #eb624f;
		font-size: 0.37rem;
	}
	
	button {
		margin-top: 2.26rem;
		width: 9.2rem;
		margin-left: 0.4rem;
		background: #e6e6e6;
		border-radius: 0.05rem;
		height: 1.3rem;
		border: none;
		color: #fff;
		font-size: 0.4rem;
	}
</style>
<style>

</style>